<template>
	<view class="flex  justify-center" style="padding: 8px;">
		<view class="m-cricle" 
		:class="{'cuIcon-add': !color, scale: isScale}" 
		:style="'background:' + color" 
		@click="$emit('click')"
		></view>
	</view>
</template>

<script>
	export default {
		props: {
			color: String
		},
		data() {
			return {
				isScale: false
			};
		},
		methods: {
			onClick() {
				this.isScale = true;
				setTimeout(() => {
					this.isScale = false;
				}, 300)
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-cricle {
		display: inline-block;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		position: relative;
		text-align: center;
		line-height: 60px;
		font-size: 13px;
		&.cuIcon-add{
			border: 1px solid #aba7a7;
			&::before {
				font-size: 22px;
				color: #aba7a7;
			}
		}
	}
</style>
